<template>
	<view>
		<view class="header">
			<view class="">
				<view class="o-h1" style="text-align: center;">
					订单详情
				</view>
				<view class="" @tap="toBack()">
					<image class="nav-margin-back-img" src="../../static/back.png" mode="widthFix"></image>
				</view>
			</view>	
			<view class="content" style="margin-top: 100rpx;">
				<view class="" style="display: flex;">
					<view class="">
						<image style="width: 53rpx;height: 53rpx;padding-right: 20rpx;" src="../../static/pay-1.png" mode=""></image>
					</view>
					<view class="o-font-10">
						未支付
					</view>
				</view>
			
				<view class="">
					<view class="c-bg">
						<view class="" style="padding: 20rpx; display: flex;justify-content: space-between">
							<view class="">
								<view >
									<text class="o-font-4" style="padding-right: 10rpx;">待支付：</text>
									<text class="o-font-4" style="padding-right: 10rpx;">总价的（70%）¥1400.00</text>
								</view>
								<view class="">
									<text class="o-font-4" style="padding-right: 10rpx;">最晚支付：</text>
									<text class="o-font-4" style="padding-right: 10rpx;">2021-01-15 12:00:0</text>
								</view>
							</view>
							<view class="">
								<image style="width: 28rpx;height: 28rpx;padding-top: 30rpx;padding-right: 20rpx;" src="../../static/next.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			
			</view>
		</view>
		
		<view class="">
			<view class=" o-bg-1" >
				<view class="o-font-1 content" style="padding: 36rpx 0;">
					订单信息
				</view>
			</view>
			<view class="content" style="margin-top: 10px;">
				<view class="">
					<view class="" style="margin-bottom: 20rpx; display: flex;justify-content: space-between;">
						<view class="">
							<text class="o-font-2" style="padding-right: 20rpx;">订单号：</text>
							<text class="o-font-2">839428352</text>
						</view>
						<view class="o-font-3">
							复制
						</view>
					</view>
					<view class="" style="margin-bottom: 20rpx; display: flex;justify-content: space-between;">
						<view class="">
							<text class="o-font-2" style="padding-right: 20rpx;">下单时间：</text>
							<text class="o-font-2">2021-01-04 13:00:12</text>
						</view>
					</view>
					<view class="" style="margin-bottom: 20rpx; display: flex;justify-content: space-between;">
						<view class="">
							<text class="o-font-2" style="padding-right: 20rpx;">计划收货：</text>
							<text class="o-font-2">2021-01-24 12:00:00</text>
						</view>
					</view>
					<view class="" style="margin-bottom: 20rpx; display: flex;justify-content: space-between;">
						<view class="">
							<text class="o-font-2" style="padding-right: 20rpx;">订单状态</text>
							<text class="o-font-2">未支付</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	
		
		<view class="">
			<view class=" o-bg-1" >
				<view class="o-font-1 content" style="padding: 36rpx 0;">
					收货地址
				</view>
			</view>
			<view class="content" style="margin-top: 10px;">
				<view class="">
					<view class="" style="margin-bottom: 20rpx; display: flex;justify-content: space-between;">
						<view class="">
							<text class="o-font-2" style="padding-right: 20rpx;">收货人：</text>
							<text class="o-font-2">Mr SUN</text>
						</view>
					</view>
					<view class="" style="margin-bottom: 20rpx; display: flex;justify-content: space-between;">
						<view class="">
							<text class="o-font-2" style="padding-right: 20rpx;">联系电话：</text>
							<text class="o-font-2">189327834632</text>
						</view>
					</view>
					<view class="" style="margin-bottom: 20rpx; display: flex;justify-content: space-between;">
						<view class="">
							<text class="o-font-2" style="padding-right: 20rpx;">收货地址：</text>
							<text class="o-font-2">浙江省湖州市长兴县沙葛小学项目部</text>
						</view>
					</view>		
				</view>
			</view>
		</view>
	
		
		<view class="m-margin-bottom" style="padding-bottom: 40rpx;">
			<view class=" o-bg-1" >
				<view class="o-font-1 content" style="padding: 36rpx 0;">
					商品明细
				</view>
			</view>
			
			<view class="">
				<view class="content" style="margin-top: 20rpx;padding-bottom: 20rpx;">
					<view class="" style="display: flex;">
						<view class="" style="padding-right: 20rpx;">
							<image style="width:206rpx;height: 206rpx;" src="../../static/pic.png" mode="widthFix"></image>
						</view>
						<view class="" style="">
							<view class="">
								<view class="o-font-2">
									外墙保温砌块 
								</view>
								<view class="o-font-2">
									规格(LxBxH)：600x200x250
								</view>
								<view class="o-font-2">
									等级:B05A3.5   平面
								</view>
							</view>
							<view class="" style="margin-top: 55rpx; display: flex;justify-content: space-between;">
								<view class="">
									<text class="o-font-4">¥89.0</text>
									<text class="o-font-1">/m³</text>
								</view>
								<view class="">
									<text class="o-font-5">40</text>
									<text class="o-font-1">/m³</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="width: 750rpx; height: 2rpx; background-color: #F7F9FC;">
					
				</view>
			</view>
			
			<view class="">
				<view class="content" style="margin-top: 20rpx;padding-bottom: 20rpx;">
					<view class="" style="display: flex;">
						<view class="" style="padding-right: 20rpx;">
							<image style="width:206rpx;height: 206rpx;" src="../../static/pic.png" mode="widthFix"></image>
						</view>
						<view class="" style="">
							<view class="">
								<view class="o-font-2">
									外墙保温砌块 
								</view>
								<view class="o-font-2">
									规格(LxBxH)：600x200x250
								</view>
								<view class="o-font-2">
									等级:B05A3.5   平面
								</view>
							</view>
							<view class="" style="margin-top: 55rpx; display: flex;justify-content: space-between;">
								<view class="">
									<text class="o-font-4">¥89.0</text>
									<text class="o-font-1">/m³</text>
								</view>
								<view class="">
									<text class="o-font-5">40</text>
									<text class="o-font-1">/m³</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="width: 750rpx; height: 2rpx; background-color: #F7F9FC;">
					
				</view>
			</view>
			
			<view class="">
				<view class="content" style="margin-top: 20rpx;padding-bottom: 20rpx;">
					<view class="" style="display: flex;">
						<view class="" style="padding-right: 20rpx;">
							<image style="width:206rpx;height: 206rpx;" src="../../static/pic.png" mode="widthFix"></image>
						</view>
						<view class="" style="">
							<view class="">
								<view class="o-font-2">
									外墙保温砌块 
								</view>
								<view class="o-font-2">
									规格(LxBxH)：600x200x250
								</view>
								<view class="o-font-2">
									等级:B05A3.5   平面
								</view>
							</view>
							<view class="" style="margin-top: 55rpx; display: flex;justify-content: space-between;">
								<view class="">
									<text class="o-font-4">¥89.0</text>
									<text class="o-font-1">/m³</text>
								</view>
								<view class="">
									<text class="o-font-5">40</text>
									<text class="o-font-1">/m³</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="width: 750rpx; height: 2rpx; background-color: #F7F9FC;">
					
				</view>
			</view>
			
			
			
		</view>
	
		<view class="o-bottom" style="display: flex;">
			<view>
				<button @click="Call()" type="default" style="width: 375rpx;height: 96rpx;">
					<text class="o-font-6" style="position: relative;top30rpx">联系客服</text>
					
					</button>
			</view>
			<view >
				<button @click="toPay()" class="" type="default" style="background-color: #1B4098; width: 375rpx;height: 96rpx;">
					<text class="o-font-7"   style="position: relative;top30rpx">立即支付</text>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			Call:function(){
				uni.makePhoneCall({
				    phoneNumber: '0572-6308033' //仅为示例
				});
			},
			toPay:function(){
				uni.navigateTo({
					url:'../order-1/order-1'
				})
			},
			toBack:function(){
				console.log(1)
				uni.navigateBack({
					delta: 1 //返回上一级页面
				})
			},
		}
	}
</script>

<style scoped lang="less">
@import url('../../style.less');
@import url('order-3.less');
</style>
